<script setup>
import { ref, onMounted } from 'vue';
import { useClusterStore } from '@/stores/cluster';
import { listJars, uploadJar, deleteJar, runJob } from '@/api/flink';
import { showSuccessToast, showFailToast } from 'vant';

const clusterStore = useClusterStore();
const loading = ref(false);
const jars = ref([]);
const showSubmitDialog = ref(false);
const currentJar = ref(null);
const submitForm = ref({
  entryClass: '',
  programArgs: '',
  parallelism: 1
});

// 加载JAR包列表
const loadJars = async () => {
  try {
    loading.value = true;
    const clusterId = clusterStore.currentCluster?.id;
    if (!clusterId) {
      throw new Error('请先选择集群');
    }
    jars.value = await listJars(clusterId);
  } catch (error) {
    showFailToast(error.message);
  } finally {
    loading.value = false;
  }
};

// 上传JAR包
const handleUpload = async (event) => {
  const file = event.target.files[0];
  if (!file) return;
  
  try {
    const clusterId = clusterStore.currentCluster?.id;
    await uploadJar(clusterId, file);
    showSuccessToast('上传成功');
    await loadJars();
  } catch (error) {
    showFailToast(error.message);
  }
};

// 删除JAR包
const handleDelete = async (jarId) => {
  try {
    const clusterId = clusterStore.currentCluster?.id;
    await deleteJar(clusterId, jarId);
    showSuccessToast('删除成功');
    await loadJars();
  } catch (error) {
    showFailToast(error.message);
  }
};

// 提交作业
const handleSubmit = async () => {
  try {
    const clusterId = clusterStore.currentCluster?.id;
    const params = {
      jarId: currentJar.value.id,
      ...submitForm.value
    };
    await runJob(clusterId, params);
    showSuccessToast('提交成功');
    showSubmitDialog.value = false;
  } catch (error) {
    showFailToast(error.message);
  }
};

onMounted(() => {
  loadJars();
});
</script>

<template>
  <div class="jars-container">
    <div class="upload-button">
      <van-uploader :after-read="handleUpload">
        <van-button type="primary" icon="plus">上传JAR包</van-button>
      </van-uploader>
    </div>

    <van-pull-refresh v-model="loading" @refresh="loadJars">
      <van-list>
        <van-cell v-for="jar in jars" :key="jar.id" :title="jar.name">
          <template #label>
            <div>上传时间: {{ new Date(jar.uploadTime).toLocaleString() }}</div>
          </template>
          <template #right-icon>
            <van-button 
              type="primary" 
              size="small" 
              @click="() => {
                currentJar = jar;
                showSubmitDialog = true;
              }"
            >
              提交
            </van-button>
            <van-button 
              type="danger" 
              size="small" 
              @click="() => handleDelete(jar.id)"
            >
              删除
            </van-button>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>

    <!-- 提交作业对话框 -->
    <van-dialog
      v-model:show="showSubmitDialog"
      title="提交作业"
      show-cancel-button
      @confirm="handleSubmit"
    >
      <van-form>
        <van-field
          v-model="submitForm.entryClass"
          label="入口类"
          placeholder="请输入入口类名"
        />
        <van-field
          v-model="submitForm.programArgs"
          label="程序参数"
          placeholder="请输入程序参数"
        />
        <van-field
          v-model="submitForm.parallelism"
          label="并行度"
          type="number"
        />
      </van-form>
    </van-dialog>
  </div>
</template>

<style scoped>
.jars-container {
  padding: 16px;
}

.upload-button {
  margin-bottom: 16px;
}

.van-button {
  margin-left: 8px;
}
</style> 